<template>
	<div class="app-container">
		<el-container>
			<el-header>
				<div class="toolbar top_box">
					<el-button class="btnPrev btnti" title="pageup" @click="onPageup()">上一题</el-button>
					<el-button class="btnNext btnti" title="pagedown" @click="onPagedown()">下一题</el-button>
					【
					<span class="fontLarge" i18n="big font" @click="changeFontSize('Large')">大</span>
					<span class="fontMiddle" i18n="mid font" style="color:#ff5a09;" @click="changeFontSize('Middle')">中</span>
					<span class="fontSmall" i18n="small font" @click="changeFontSize('Small')">小</span>
					】
					<!-- 倒计时begin -->
					<span class="countdowntime mr_30">
						距交卷
						<a class="mr_30 countdownHH">{{ hastime.hour }}</a>
						<a class="mr_30 countdownMM">{{ hastime.minute }}</a>
						<a class="countdownSS">{{ hastime.second }}</a>
					</span>
					<!-- 倒计时end -->
					<el-button type="button" id="btnSave" class="btnSave btnss" @click="savepaper(0)">保存</el-button>
					<el-button type="button" id="btnSubmit" @click="savepaper(1)" class="btnss">交卷</el-button>
				</div>
			</el-header>
			<el-main id="papermian">
				<el-row>
					<el-col :span="4" class="leftbox" id="askquestion" style="overflow-y: scroll;overflow-x: scroll;">
						<el-form>
							<el-form-item><h1>答题情况</h1></el-form-item>
							<el-form-item class="notes">
								<ul>
									<li>
										<a class="mr_10">
											<span class="iconnotreplied"></span>
											未答
										</a>
										<a class="mr_10">
											<span class="iconreplied"></span>
											已答
										</a>
										<span class="iconsaved"></span>
										己保存
									</li>
									<li>
										作答进度
										<span id="txtPercent"></span>
										<el-progress :text-inside="true" :stroke-width="18" :percentage="dtjdbfb" color="rgba(142, 113, 199, 0.7)"></el-progress>
									</li>
								</ul>
							</el-form-item>
							<el-form-item>
								<h2>一. 单项选择题</h2>
								<div class="card_top"></div>
								<div class="card_center">
									<table class="thumbnail">
										<tbody>
											<!--题目只有5题的时候-->
											<tr v-if="parseInt(dxquestion.length / 5) == 0">
												<td @click="goAnchor('#question-' + cindex, cindex)" v-for="cindex in dxquestion.length" :qid="'qid' + cindex">
													<span :id="'rodio' + dxquestion[cindex - 1].question.id" class="jmp">{{ cindex }}</span>
												</td>
											</tr>
											<!--题目大于5题的时候,不是5的整倍数的时候-->
											<tr v-else-if="parseInt(dxquestion.length / 5) > 0" v-for="index in parseInt(dxquestion.length / 5)">
												<td
													@click="goAnchor('#question-' + ((index - 1) * 5 + cindex), (index - 1) * 5 + cindex)"
													v-for="cindex in dxquestion.slice((index - 1) * 5, index * 5).length"
													:qid="'qid' + ((index - 1) * 5 + cindex)"
												>
													<span :id="'rodio' + dxquestion.slice((index - 1) * 5, index * 5)[cindex - 1].question.id" class="jmp">
														{{ (index - 1) * 5 + cindex }}
													</span>
												</td>
											</tr>
											<!--题目大于5题的时候,是5的整倍数的时候-->
											<tr v-if="dxquestion.length > 5 && dxquestion.length % 5 > 0">
												<td
													@click="goAnchor('#question-' + (cindex + parseInt(dxquestion.length / 5) * 5), cindex + parseInt(dxquestion.length / 5) * 5)"
													v-for="cindex in dxquestion.slice(parseInt(dxquestion.length / 5) * 5, dxquestion.length).length"
													:qid="'qid' + (cindex + parseInt(dxquestion.length / 5) * 5)"
												>
													<span
														:id="'rodio' + dxquestion.slice(parseInt(dxquestion.length / 5) * 5, dxquestion.length)[cindex - 1].question.id"
														class="jmp"
													>
														{{ cindex + parseInt(dxquestion.length / 5) * 5 }}
													</span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="card_foot"></div>
							</el-form-item>
							<el-form-item>
								<h2>二. 多选题</h2>
								<div class="card_top"></div>
								<div class="card_center">
									<table class="thumbnail">
										<tbody>
											<tr v-if="parseInt(dxxquestion.length / 5) == 0">
												<td
													@click="goAnchor('#question-' + (cindex + dxquestion.length), cindex + dxquestion.length)"
													v-for="cindex in dxxquestion.length"
													:qid="'qid' + (cindex + dxquestion.length)"
												>
													<span :id="'check' + dxxquestion[cindex - 1].question.id" class="jmp">{{ cindex }}</span>
												</td>
											</tr>
											<tr v-else-if="parseInt(dxxquestion.length / 5) > 0" v-for="index in parseInt(dxxquestion.length / 5)">
												<td
													@click="goAnchor('#question-' + ((index - 1) * 5 + cindex + dxquestion.length), (index - 1) * 5 + cindex + dxquestion.length)"
													v-for="cindex in dxxquestion.slice((index - 1) * 5, index * 5).length"
													:qid="'qid' + ((index - 1) * 5 + cindex + dxquestion.length)"
												>
													<span :id="'check' + dxxquestion.slice((index - 1) * 5, index * 5)[cindex - 1].question.id" class="jmp">
														{{ (index - 1) * 5 + cindex }}
													</span>
												</td>
											</tr>
											<tr v-if="dxxquestion.length > 5 && dxxquestion.length % 5 > 0">
												<td
													@click="
														goAnchor(
															'#question-' + (cindex + dxquestion.length + parseInt(dxxquestion.length / 5) * 5),
															cindex + dxquestion.length + parseInt(dxxquestion.length / 5) * 5
														)
													"
													v-for="cindex in dxxquestion.slice(parseInt(dxxquestion.length / 5) * 5, dxxquestion.length).length"
													:qid="'qid' + (cindex + dxquestion.length + parseInt(dxxquestion.length / 5) * 5)"
												>
													<span
														:id="'check' + dxxquestion.slice(parseInt(dxxquestion.length / 5) * 5, dxxquestion.length)[cindex - 1].question.id"
														class="jmp"
													>
														{{ cindex + parseInt(dxxquestion.length / 5) * 5 }}
													</span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="card_foot"></div>
							</el-form-item>
							<el-form-item>
								<h2>三. 判断题</h2>
								<div class="card_top"></div>
								<div class="card_center">
									<table class="thumbnail">
										<tbody>
											<tr v-if="parseInt(pdquestion.length / 5) == 0">
												<td
													@click="
														goAnchor('#question-' + (cindex + dxquestion.length + dxxquestion.length), cindex + dxquestion.length + dxxquestion.length)
													"
													v-for="cindex in pdquestion.length"
													:qid="'qid' + (cindex + dxquestion.length + dxxquestion.length)"
												>
													<span :id="'hasboolean' + pdquestion[cindex - 1].question.id" class="jmp">{{ cindex }}</span>
												</td>
											</tr>
											<tr v-else-if="parseInt(pdquestion.length / 5) > 0" v-for="index in parseInt(pdquestion.length / 5)">
												<td
													@click="
														goAnchor(
															'#question-' + ((index - 1) * 5 + cindex + dxquestion.length + dxxquestion.length),
															(index - 1) * 5 + cindex + dxquestion.length + dxxquestion.length
														)
													"
													v-for="cindex in pdquestion.slice((index - 1) * 5, index * 5).length"
													:qid="'qid' + ((index - 1) * 5 + cindex + dxquestion.length + dxxquestion.length)"
												>
													<span :id="'hasboolean' + pdquestion.slice((index - 1) * 5, index * 5)[cindex - 1].question.id" class="jmp">
														{{ (index - 1) * 5 + cindex }}
													</span>
												</td>
											</tr>
											<tr v-if="pdquestion.length > 5 && pdquestion.length % 5 > 0">
												<td
													@click="
														goAnchor(
															'#question-' + (cindex + dxquestion.length + dxxquestion.length + parseInt(pdquestion.length / 5) * 5),
															cindex + dxquestion.length + dxxquestion.length + parseInt(pdquestion.length / 5) * 5
														)
													"
													v-for="cindex in pdquestion.slice(parseInt(pdquestion.length / 5) * 5, pdquestion.length).length"
													:qid="'qid' + (cindex + dxquestion.length + dxxquestion.length + parseInt(pdquestion.length / 5) * 5)"
												>
													<span
														:id="'hasboolean' + pdquestion.slice(parseInt(pdquestion.length / 5) * 5, pdquestion.length)[cindex - 1].question.id"
														class="jmp"
													>
														{{ cindex + parseInt(pdquestion.length / 5) * 5 }}
													</span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="card_foot"></div>
							</el-form-item>
							<el-form-item v-if="tkquestion.length > 0">
								<h2>四. 问答题</h2>
								<div class="card_top"></div>
								<div class="card_center">
									<table class="thumbnail">
										<tbody>
											<tr v-if="parseInt(tkquestion.length / 5) == 0">
												<td
													@click="
														goAnchor(
															'#question-' + (cindex + dxquestion.length + dxxquestion.length + pdquestion.length),
															cindex + dxquestion.length + dxxquestion.length + pdquestion.length
														)
													"
													v-for="cindex in tkquestion.length"
													:qid="'qid' + (cindex + dxquestion.length + dxxquestion.length + pdquestion.length)"
												>
													<span :id="'input' + tkquestion[cindex - 1].question.id" class="jmp">{{ cindex }}</span>
												</td>
											</tr>
											<tr v-else-if="parseInt(tkquestion.length / 5) > 0" v-for="index in tkquestion.length / 5">
												<td
													@click="
														goAnchor(
															'#question-' + (cindex * index + dxquestion.length + dxxquestion.length + pdquestion.length),
															cindex * index + dxquestion.length + dxxquestion.length + pdquestion.length
														)
													"
													v-for="cindex in tkquestion.slice(index - 1, index * 5).length"
													:qid="'qid' + (cindex * index + dxquestion.length + dxxquestion.length + pdquestion.length)"
												>
													<span :id="'input' + tkquestion.slice(index - 1, index * 5)[cindex - 1].question.id" class="jmp">{{ cindex }}</span>
												</td>
											</tr>
											<tr v-if="tkquestion.length > 5 && tkquestion.length % 5 > 0">
												<td
													@click="
														goAnchor(
															'#question-' + (cindex * parseInt(tkquestion.length / 5) + dxquestion.length + dxxquestion.length + pdquestion.length),
															cindex * parseInt(tkquestion.length / 5) + dxquestion.length + dxxquestion.length + pdquestion.length
														)
													"
													v-for="cindex in tkquestion.slice(parseInt(tkquestion.length / 5), tkquestion.length).length"
													:qid="'qid' + (cindex * parseInt(tkquestion.length / 5) + dxquestion.length + dxxquestion.length + pdquestion.length)"
												>
													<span :id="'input' + tkquestion.slice(parseInt(tkquestion.length / 5), tkquestion.length)[cindex - 1].question.id" class="jmp">
														{{ cindex }}
													</span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="card_foot"></div>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col id="questionbox" :span="19" class="table_box" style="overflow-y: scroll;overflow-x: scroll;" v-bind:style="styleObject">
						<el-form style="width: 100%;">
							<el-form-item class="arrange papertitle">
								<span class="title">{{ exam.title }}</span>
								<span class="score">(共{{ totalquestion }}题，共{{ totalgoal }}分)</span>
							</el-form-item>
							<el-form-item class="section" v-if="dxquestion.length > 0" style="text-align: left;">
								<span class="note">一. 单选题 (共{{ dxquestion.length }}题，共{{ dxquestion.length * eed.dxcustomscore }}分)</span>
							</el-form-item>

							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1)"
								v-for="(item, index) in dxquestion"
								:key="item.question.id"
								:mdkey="'question' + item.question.id"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>

								<span class="score">[{{ eed.dxcustomscore }}分]</span>
								<div class="blank01"></div>
								<el-radio-group
									@change="value => dxchange(value, index + 1, item.question)"
									v-model="dxmodel[rodioname + item.question.id]"
									class="userAnswer choice"
									style="margin-left: 50px;"
								>
								<tr v-for="(ritem, rindex) in item.results">
									<el-radio  :key="ritem.id" :label="ritem.id">{{ ritem.text }}</el-radio></tr>
								</el-radio-group>
							</el-form-item>
							<el-form-item class="section" v-if="dxxquestion.length > 0" style="text-align: left;">
								<span class="note">二. 多选题 (共{{ dxxquestion.length }}题，共{{ dxxquestion.length * eed.dxxcustomscore }}分)</span>
							</el-form-item>
							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1 + dxquestion.length)"
								v-for="(item, index) in dxxquestion"
								:key="item.question.id"
								ref="questionitem"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>

								<span class="score">[{{ eed.dxxcustomscore }}分]</span>
								<div class="blank01"></div>
								<el-checkbox-group
									@change="value => dxxchange(value, index + 1 + dxquestion.length, item.question)"
									v-model="dxxmodel[checkname + item.question.id]"
									style="margin-left: 50px;"
								>
									<tr v-for="(ritem, rindex) in item.results"><el-checkbox :label="ritem.id"  :key="item.id">{{ ritem.text }}</el-checkbox></tr>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item class="section" v-if="pdquestion.length > 0" style="text-align: left;">
								<span class="note">三. 判断题 (共{{ pdquestion.length }}题，共{{ pdquestion.length * eed.pdcustomscore }}分)</span>
							</el-form-item>
							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1 + dxxquestion.length + dxquestion.length)"
								v-for="(item, index) in pdquestion"
								:key="item.question.id"
								ref="questionitem"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>
								<span class="score">[{{ eed.pdcustomscore }}分]</span>
								<div class="blank01"></div>
								<el-radio-group
									@change="value => pdchange(value, index + 1 + dxxquestion.length + dxquestion.length, item.question)"
									v-model="pdmodel[hasboolean + item.question.id]"
									style="margin-left: 50px;"
								>
									<tr v-for="(ritem, rindex) in item.results" :key="ritem.id">
										<el-radio :label="ritem.id">{{ ritem.text }}</el-radio>
									</tr>
								</el-radio-group>
							</el-form-item>
							<el-form-item class="section" v-if="tkquestion.length > 0" style="text-align: left;">
								<span class="note">四. 问答题 (共{{ tkquestion.length }}题，共{{ tkquestion.length * eed.tkcustomscore }}分)</span>
							</el-form-item>
							<el-form-item
								class="question efitem"
								:id="'question-' + (index + 1 + dxxquestion.length + dxquestion.length + pdquestion.length)"
								v-for="(item, index) in tkquestion"
								:key="item.question.id"
							>
								<div class="snblock">{{ index + 1 }}.</div>
								<span style="margin-left: 50px;">{{ item.question.title }}</span>
								<span class="score">[{{ eed.tkcustomscore }}分]</span>
								<div class="blank01"></div>
								<el-input
									@change="value => tkchange(value, index + 1 + dxxquestion.length + dxquestion.length + pdquestion.length, item.question)"
									style="margin-left: 50px;"
									type="textarea"
									:rows="2"
									placeholder="请输入内容"
									v-model="tkmodel[inputname + item.question.id]"
								></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :fullscreen="false" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<span>{{ alererror }}</span>
			<span slot="footer" class="dialog-footer"><el-button type="primary" @click="erroOn()">确 定</el-button></span>
		</el-dialog>
	</div>
</template>
<script>
import { randomQuestion, SavePaper } from '@/api/exam';
import Vue from 'vue';
import { Loading } from 'element-ui'
import './exam.css';
export default {
	data() {
		return {
			alertcode: 0,
			alererror: '您已经超时操作，考试结束！',
			dialogVisible: false,
			examinfo: {},
			exam: {},
			userpaper: {},
			upqs: {},
			timeout: 0,
			tkchecked: [],
			pdchecked: [],
			dxchecked: [],
			dxxchecked: [],
			dtjdbfb: 0,
			totalquestion: 0,
			dxquestion: [],
			dxxquestion: [],
			pdquestion: [],
			tkquestion: [],
			rodioname: 'rodio',
			checkname: 'check',
			goalname: 'goal',
			inputname: 'input',
			hasboolean: 'hasboolean',
			hastime: {
				etime: new Date(new Date().getTime() + 1 * 60 * 60 * 1000),
				hour: 0,
				minute: 0,
				second: 0
			},
			dxmodel: {},
			tkmodel: {},
			dxxmodel: {},
			pdmodel: {},
			testmodel: {},
			currentindex: 0,
			dxmodel: {},
			styleObject: {
				height: '0px'
			},
			totalgoal: 0,
			eed: {},
		};
	},
	methods: {
		setTimer() {
			this.timeout = window.setInterval(() => {
				this.leftTimer();
			}, 1000);
		
		},
		renderAnswerCark(prop) {
			let _this = this;
			//在mounted中DOM 还没有更新,需要使用nextTick,详细请看官方文档https://cn.vuejs.org/v2/api/#Vue-nextTick
			Vue.nextTick(function() {
				//答题卡标志已经保存的题目
				if ($('#' + prop).attr('class') == 'jmp') {
					$('#' + prop).attr('class', 'saved');
				}
				//题目跟答题卡高度保持一致
				_this.styleObject.height = $('#askquestion').height() + 'px';
			});
		},
		setPaper() {
			var _this = this;
			let loadingInstance= Loading.service({ fullscreen: true });
			var query = {
				examid: this.examinfo.examid,
				workno: this.examinfo.user.workno
			};
			randomQuestion(query).then(res => {
				if (res.result) {
					this.resData = res.data;
					let list = res.data.list;
					this.eed = this.resData.eed;
					this.exam=this.resData.exam;
					this.userpaper = this.resData.userpaper;
					this.totalquestion = this.resData.eed.dxsize + this.resData.eed.dxxsize + this.resData.eed.tksize + this.resData.eed.pdsize;
					this.totalgoal =
						this.resData.eed.dxsize * this.resData.eed.dxcustomscore +
						this.resData.eed.dxxsize * this.resData.eed.dxxcustomscore +
						this.resData.eed.tksize * this.resData.eed.tkcustomscore +
						this.resData.eed.pdsize * this.resData.eed.pdcustomscore;
					//分类题目
					for (let i = 0; i < list.length; i++) {
						if (list[i].question.typeid == 1) {
							var prop = 'rodio' + list[i].question.id;
							var val = false;
							//upq==null即是没有保存过的试卷
							if (list[i].upq != null) {
								var useranswer = list[i].upq.useranswer;
								//填写已经保存过的答案
								if (useranswer != null) {
									val = Number(useranswer);
									//渲染答题卡
									this.renderAnswerCark(prop);
								}
							}
							Vue.set(this.dxmodel, prop, val);
							this.dxquestion.push(list[i]);
						} else if (list[i].question.typeid == 2) {
							var prop = 'check' + list[i].question.id;
							var val = new Array();
							if (list[i].upq != null) {
								var useranswer = list[i].upq.useranswer;
								//填写已经保存过的答案
								if (useranswer != null) {
									useranswer = useranswer.substr(1, useranswer.length - 2);
									useranswer = useranswer.split(',');
									for (let i = 0; i < useranswer.length; i++) {
										val.push(Number(useranswer[i]));
									}
									//渲染答题卡
									this.renderAnswerCark(prop);
								}
							}
							Vue.set(this.dxxmodel, prop, val);
							this.dxxquestion.push(list[i]);
						} else if (list[i].question.typeid == 3) {
							var prop = 'input' + list[i].question.id;
							var val = '';
							if (list[i].upq != null) {
								var useranswer = list[i].upq.useranswer;
								//填写已经保存过的答案
								if (useranswer != null) {
									val = useranswer;
									//渲染答题卡
									this.renderAnswerCark(prop);
								}
							}
							Vue.set(this.tkmodel, prop, val);
							this.tkquestions.push(list[i]);
						} else if (list[i].question.typeid == 4) {
							var prop = 'hasboolean' + list[i].question.id;
							var val = false;
							if (list[i].upq != null) {
								var useranswer = list[i].upq.useranswer;
								//填写已经保存过的答案
								if (useranswer != null) {
									val = Number(useranswer);
									//渲染答题卡
									this.renderAnswerCark(prop);
								}
							}
							Vue.set(this.pdmodel, prop, val);
							this.pdquestion.push(list[i]);
						}
					}
					//题目数据
					this.listData = list;
					let userpaper = this.resData.userpaper;
					//设置考试时间
					this.hastime.etime = new Date(new Date().getTime() + 1 * this.resData.exam.time * 60 * 1000);
					if (userpaper != undefined && userpaper != null) {
						//进度条
						this.dtjdbfb = userpaper.finish;
						//更新剩余时间
						var lefttime = userpaper.lefttime;
						if (lefttime != undefined && lefttime != null && lefttime > 0) {
							this.hastime.etime = new Date(new Date().getTime() + lefttime);
						}
					}
					this.setTimer();
					this.$nextTick(() => { 
                         loadingInstance.close();
                   });
				} else {
					_this.$notify({
						title: '温馨提示',
						message: '操作失败，请联系管理员！',
						type: 'error',
						duration: 0
					});
				}
			});
		},
		isEmty(val) {
			if (val != undefined && val != null && val != '') {
				return true;
			}
			return false;
		},
		goAnchor(id, index) {
			//选择的时候this.currentindex==0说明没有选择任何题
			if (this.currentindex == 0) {
				this.currentindex = index;
			}
			$('#question-' + this.currentindex).attr('class', 'el-form-item question efitem');
			var anchor = this.$el.querySelector(id);
			if (anchor == null) {
				$('#questionbox').scrollTop($('#question-1').scrollTop());
				this.currentindex = 1;
			} else {
				//$('#questionbox').scrollTop(anchor.offsetTop);
				this.currentindex = index;
			}
			$('#question-' + +this.currentindex).attr('class', 'el-form-item question current efitem');
		},
		onPageup() {
			if (this.currentindex != 0) {
				if (this.currentindex == 1) {
					$('#question-' + this.currentindex).attr('class', 'el-form-item question efitem');
					//跳转试题，效果不佳暂时取消
					//$('#questionbox').scrollTop($('#question-1').offsetTop());
					$('#question-' + this.currentindex).attr('class', 'el-form-item question current efitem');
				} else {
					$('#question-' + this.currentindex).attr('class', 'el-form-item question efitem');
					this.currentindex -= 1;
					//$('#questionbox').scrollTop($('#question-' + this.currentindex).offsetTop());
					$('#question-' + this.currentindex).attr('class', 'el-form-item question current efitem');
				}
			}
			//已经回退到第一题
			else if (this.currentindex == 0) {
				//$('#questionbox').scrollTop($('#question-1').offsetTop());
				$('#question-' + this.currentindex).attr('class', 'el-form-item question current efitem');
			}
		},
		onPagedown() {
			if (this.currentindex == 0) {
				this.currentindex += 1;
				$('#question-' + this.currentindex).attr('class', 'el-form-item question current efitem');
				//$('#questionbox').scrollTop($('#question-1').offsetTop());
			} else if (this.currentindex > 0) {
				//移除上一题样式
				$('#question-' + this.currentindex).attr('class', 'el-form-item question efitem');
				this.currentindex += 1;
				var anchor = this.$el.querySelector('#question-' + this.currentindex);
				//anchor==null 说明已经达到最后一题
				if (anchor == null) {
					//返回第一道题
					this.currentindex = 1;
					$('#question-' + this.currentindex).attr('class', 'el-form-item question current efitem');
					//$('#questionbox').scrollTop($('#question-1').offsetTop());
				} else {
					$('#question-' + this.currentindex).attr('class', ' el-form-item question current efitem');
					//$('#questionbox').scrollTop($('#question-' + this.currentindex).offsetTop());
				}
			}
		},
		changeFontSize(type) {
			var x = type == 'Large' ? '20px' : type == 'Small' ? '12px' : '16px';
			$('.question  div span').css('font-size', x);
			$('.note').css('font-size', x);
			$('.fontLarge,.fontMiddle,.fontSmall').css('color', 'white');
			$('.font' + type).css('color', '#ff5a09');
		},
		leftTimer() {
			var reg = /^\d{2}$/;
			var ending = this.hastime.etime;
			var now = new Date();
			if (now >= ending) {
				window.clearTimeout(this.timeout);
				clearTimeout(this.timeout);
				this.qzConfirm();
				return;
			}
			var disc = ending - now;
			this.disctime = disc;
			var hour = parseInt((disc / 1000 / 60 / 60) % 24);
			hour = !reg.test(hour) ? '0' + hour : hour;
			var minute = parseInt((disc / 1000 / 60) % 60);
			minute = !reg.test(minute) ? '0' + minute : minute;
			var second = parseInt((disc / 1000) % 60);
			second = !reg.test(second) ? '0' + second : second;
			this.hastime.hour = hour;
			this.hastime.minute = minute;
			this.hastime.second = second;
			this.styleObject.height = $('#askquestion').height() + 'px';
		},
		checkTime(i) {
			//将0-9的数字前面加上0，例1变为01
			if (i < 10) {
				i = '0' + i;
			}
			return i;
		},
		dxxchange(value, index, question) {
			this.mddtk(value, index, question);
		},
		dxchange(value, index, question) {
			this.mddtk(value, index, question);
		},
		pdchange(value, index, question) {
			this.mddtk(value, index, question);
		},
		tkchange(value, index, question) {
			this.mddtk(value, index, question);
		},
		mddtk(value, index, question) {
			var qid = 'td[qid=qid' + index + '] span';
			var id = '#' + $(qid)[0].id;
			$(id).attr('class', 'replied');
			//多选有取消全部选项的时候
			if (question.typeid == 2 && value.length == 0) {
				$(id).attr('class', 'jmp');
			}
			var jmps = $("span[class='jmp']");
			this.dtjdbfb = 100 - parseInt((jmps.length / this.totalquestion) * 100);
			//锚点
			this.goAnchor('#question-' + index, index);
		},
		savepaper(code) {
			//获取已经点击的答题卡内容
			if (code == 0) {
				this.saveconfirm(code);
			} else if (code == 1) {
				var jmps = $("span[class='jmp']");
				if (jmps.length != 0) {
					const h = this.$createElement;
					this.$message({
						message: h('p', null, [h('span', null, '您未完成考试 '), h('i', { style: 'color: red' }, '还有' + jmps.length + '题未作答!')])
					});
				} else if (jmps.length == 0) {
					this.saveconfirm(code);
				}
			}
		},
		saveconfirm(code) {
			//lefttime:this.endtime-this.nowtime;
			var _this = this;
			var json = {
				dxquestions: this.dxmodel,
				dxxquestions: this.dxxmodel,
				tkquestions: this.tkmodel,
				pdquestions: this.pdmodel,
				userpaper: { examid: 8, workno: 61459, finish: this.dtjdbfb, lefttime: this.disctime },
				actiontype: 0
			};
			var alertext = '确定要提交数据吗？';
			if (code == 0) {
				alertext = '现在就要保存吗？';
				json.userpaper.display = 1;
			} else if (code == 1) {
				alertext = '交卷后不可再次参加考试,确定要提交吗？';
				json.userpaper.display = 0;
			}

			this.$confirm(alertext, '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '提交',
				cancelButtonText: '在看看'
			})
				.then(() => {
					//console.log(json);
					SavePaper(json).then(res => {
						if (code == 0) {
							//保存成功，答的题变绿
							var hasjmps = $("span[class='replied']");
							for (var i = 0; i < hasjmps.length; i++) {
								var id = '#' + hasjmps[i].id;
								$(id).attr('class', 'saved');
							}
							_this.$message({
								type: 'info',
								message: '保存成功！'
							});
						} else if (code == 1) {
							var jmps = encodeURI(JSON.stringify(res.data));
							_this.$router.push({ path: '/result', query: { info: jmps } });
						}
					});
				})
				.catch(action => {
					_this.$message({
						type: 'info',
						message: '请继续作答，并注意答题时间！'
					});
				});
		},
		disablehtml() {
			//var window=this._window;
			//禁止页面回退
			window.history.forward(1);
			//禁止页面刷新
			document.onkeydown = function() {
				if (window.event.keyCode == 116 || (window.event.ctrlKey && window.event.keyCode == 82)) {
					window.event.keyCode = 0;
					window.event.returnValue = false;
				}
			};
			//js屏蔽浏览器（IE和FireFox）的刷新功能
			document.onkeydown = function() {
				if (
					window.event.keyCode == 116 || //屏蔽 F5
					window.event.keyCode == 122 || //屏蔽 F11
					(window.event.shiftKey && window.event.keyCode == 121) //shift+F10
				) {
					window.event.keyCode = 0;
					window.event.returnValue = false;
				}
				if (window.event.altKey && window.event.keyCode == 115) {
					//屏蔽Alt+F4
					window.showModelessDialog('about:blank', '', 'dialogWidth:1px;dialogheight:1px');
					return false;
				}
			};
			document.onkeydown = function(e) {
				var ev = window.event || e;
				var code = ev.keyCode || ev.which;
				if (code == 116) {
					if (ev.preventDefault) {
						ev.preventDefault();
					} else {
						ev.keyCode = 0;
						ev.returnValue = false;
					}
				}
			};
			//js屏蔽右键
			if (window.Event) document.captureEvents(Event.MOUSEUP);
			function nocontextmenu() {
				window.event.cancelBubble = true;
				window.event.returnValue = false;
				return false;
			}
			function norightclick(e) {
				if (window.Event) {
					if (e.which == 2 || e.which == 3) return false;
				} else if (event.button == 2 || event.button == 3) {
					event.cancelBubble = true;
					event.returnValue = false;
					return false;
				}
			}
			document.oncontextmenu = nocontextmenu; // for IE5+
			document.onmousedown = norightclick; // for all others
		},
		closeWindow: function() {
			var userAgent = navigator.userAgent;
			if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf('Chrome') != -1) {
				location.href = 'about:blank';
			} else {
				window.opener = null;
				window.open('', '_self');
				window.close();
			}
			window.close();
		},
		erroOn() {
			this.dialogVisible = false;
			this.$router.push({ path: '/' });
		},
		qzConfirm() {
			var _this = this;
			var json = {
				dxquestions: this.dxmodel,
				dxxquestions: this.dxxmodel,
				tkquestions: this.tkmodel,
				pdquestions: this.pdmodel,
				userpaper: { examid: this.examinfo.examid, workno: this.examinfo.user.workno, finish: this.dtjdbfb, lefttime: this.disctime, display: 0 }
			};
			SavePaper(json).then(res => {
				var jmps = encodeURI(JSON.stringify(res.data));
				this.$alert('您已经被强制交卷,点击确认查看最终成绩!', '超时操作!', {
					confirmButtonText: '确定',
					maskClosable: false,
					keyboard: false,
					closable: false,
					callback: action => {
						this.$router.push({ path: '/result', query: { info: jmps } });
					}
				});
			});
		}
	},
	mounted() {
		var _this = this;
		this.examinfo = this.$route.query.examinfo;
		if (this.isEmty(this.$route.query.examinfo.user)) {
			window.clearTimeout(this.timeout);
			clearTimeout(this.timeout);
			//生成试卷
			this.setPaper();
			//this.disablehtml();
		} else {
			window.clearTimeout(this.timeout);
			clearTimeout(this.timeout);
			this.alertcode = 0;
			this.alererror = '无法读取您的信息，请重新选择考试！';
			this.dialogVisible = true;
		}
	},
	destroyed() {
		window.clearTimeout(this.timeout);
		clearTimeout(this.timeout);
	},
	updated() {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.papertitle {
	background: #6fbbb5;
	height: auto;
	line-height: 58px;
	color: #fff;
	font-size: 1.2rem;
	border-radius: 5px 5px 0 0;
}
.fonttitle {
	font-size: 50px;
}
.efitem {
	text-align: left;
	background: #faf2e1;
}
</style>
